/*
 * This file is part of Avenge <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Avenge is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Avenge is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "io-popout.scss";
@import "io-popout-fixes.scss";

html
{
  font-size: 16px;
}

body
{
  display: flex;
  /* We force vertical scrollbars to keep the content centered */
  overflow-y: scroll;
  margin: 1rem 0.3rem;
  color: #4A4A4A;
  background-color: #F3F3F3;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  line-height: 1.3rem;
  justify-content: center;
}

h1
{
  font-size: 3rem;
  font-weight: 300;
  line-height: 3rem;
}

h2
{
  font-size: 1.125rem;
  font-weight: 700;
}

a
{
  color: #077CA6;
}

a:hover
{
  color: #5CBCE1;
}

ul
{
  margin: 0rem;
}

main h3
{
  margin-top: 0rem;
  margin-bottom: 0.5rem;
}

[aria-hidden="true"]
{
  display: none !important;
}

input[type="text"],
input[type="url"],
textarea,
main
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
  Normalization
 */

input,
button
{
  font-family: inherit;
}

button
{
  border-radius: 0rem;
}

/*
  Buttons and links
 */

button,
.button
{
  display: block;
  padding: 0.6rem 0.8rem;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

button:disabled,
button[aria-disabled="true"]
{
  cursor: default;
}

/* Ignore .icon to avoid overriding "specific" (primary, secondary) styles */
button.primary:not(.icon),
.button.primary:not(.icon)
{
  border: 0px;
  color: #FFF;
  background-color: #077CA6;
}

button.primary:not([disabled]):not(.icon):hover,
.button.primary:not(.icon):hover
{
  box-shadow: inset 0 0 0 3px #005D80;
}

button.primary[disabled]:not(.icon)
{
  background-color: #5CBCE1;
}

button.secondary:not(.icon),
.button.secondary:not(.icon)
{
  border: 2px solid #077CA6;
  color: #077CA6;
}

button.secondary:not(.icon):hover,
.button.secondary:not(.icon):hover
{
  box-shadow: inset 0 0 0 1px #077CA6;
}

button.link,
button.list
{
  color: #077CA6;
}

button.link
{
  padding: 0.2rem;
  border: 0px;
  background-color: transparent;
  font-family: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-transform: none;
}

button.link:hover
{
  color: #5CBCE1;
}

button.list
{
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #CDCDCD;
  background-color: #E1F2FA;
  text-align: initial;
}

button.list:hover
{
  border-color: #077CA6;
  box-shadow: inset 0 0 0 3px #077CA6;
}

.side-controls:not(.wrap)
{
  display: flex;
  margin: 0.8rem 0rem;
  justify-content: flex-end;
}

.side-controls button
{
  margin: 0rem;
}

/*
  Due to Edge adoption as new target browser
  we cannot use -moz/webkit-margin-start
  or -moz/webkit-margin-end because
  these lack Edge support.
  Yet we need to preserve html direction
  and potential UI that might swap right to left.
*/
html:not([dir="rtl"]) .side-controls button
{
  margin-left: 1rem;
}

html[dir="rtl"] .side-controls button
{
  margin-right: 1rem;
}

.side-controls.wrap button
{
  margin: 0.6rem 0rem;
}

html:not([dir="rtl"]) .side-controls.wrap button
{
  margin-left: auto;
}

html[dir="rtl"] .side-controls.wrap button
{
  margin-right: auto;
}

/*
  icons
 */

.icon
{
  padding: 0px;
  border: 0px;
  background-color: transparent;
}

.icon:hover
{
  box-shadow: none;
}

.icon::before
{
  display: block;
  border: 0.2rem solid transparent;
  background-repeat: no-repeat;
  content: "";
}

button[role="checkbox"].icon::before
{
  width: 1.2rem;
  height: 1.2rem;
  padding: 0px;
}

button[role="checkbox"][disabled].icon:not(.toggle)::before,
button[role="checkbox"][aria-disabled="true"].icon:not(.toggle)::before
{
  margin: 0.2rem;
  border: 0rem;
  border-radius: 2px;
  background-color: #ccc;
}

button[role="checkbox"].icon:not(.toggle)::before
{
  /* Using ?query as a workaround to chromium bug #643716 */
  background-image: url(icons/checkbox.svg?off#off);
}

button[role="checkbox"][aria-checked="true"].icon:not(.toggle)::before
{
  background-image: url(icons/checkbox.svg?on#on);
}

button[role="checkbox"][aria-checked="true"].icon:disabled:not(.toggle)::before
{
  background-image: url(icons/checkbox.svg?on-disabled#on-disabled);
}

button[role="checkbox"].icon.toggle::before
{
  background-image: url(icons/toggle.svg?on#on);
}

button[role="checkbox"][aria-checked="false"].icon.toggle::before
{
  background-image: url(icons/toggle.svg?off#off);
}

button[role="checkbox"].icon.toggle::before
{
  width: 1.9rem;
  height: 1rem;
}

button[role="checkbox"][disabled].icon.toggle::before
{
  background: none;
}

.icon.delete::before
{
  background-image: url(icons/trash.svg?default#default);
}

.icon.delete:hover::before
{
  background-image: url(icons/trash.svg?hover#hover);
}

.icon.gear::before
{
  background-image: url(icons/gear.svg?default#default);
}

.icon.gear:hover::before
{
  background-image: url(icons/gear.svg?hover#hover);
}

.icon.gear::before,
.icon.delete::before
{
  width: 1rem;
  height: 1rem;
}

[data-validation] .floating-input input:focus:invalid ~ .icon.attention::before
{
  background-image: url(icons/attention.svg);
}

[data-validation] .floating-input input:valid ~ .icon.attention::before
{
  top: 0.5rem;
  background-image: url(icons/checkmark.svg?approved#approved);
}

.icon.update-subscription::before
{
  background-image: url(icons/reload.svg);
}

.icon.website::before
{
  background-image: url(icons/globe.svg);
}

.icon.source::before
{
  background-image: url(icons/code.svg);
}

.icon.delete::before
{
  background-image: url(icons/trash.svg?default#default);
}

.close.icon::before
{
  width: 1rem;
  height: 1rem;
}

.icon.close.primary::before
{
  background-image: url(icons/delete.svg?primary#primary);
}

.icon.close.primary:hover::before
{
  background-image: url(icons/delete.svg?primary-hover#primary-hover);
}

.icon.close.secondary::before
{
  background-image: url(icons/delete.svg?secondary#secondary);
}

.icon.close.tertiary::before
{
  background-image: url(icons/delete.svg?tertiary#tertiary);
}

.icon.close.secondary:hover::before
{
  background-image: url(icons/delete.svg?secondary-hover#secondary-hover);
}

.icon.close.tertiary:hover::before
{
  background-image: url(icons/delete.svg?tertiary-hover#tertiary-hover);
}

#dialog .table.list li button.icon::before
{
  width: 1.3rem;
  height: 1.3rem;
  margin: 0rem;
  border: 0rem;
  background-image: none;
}

#dialog .table.list li button[aria-checked="true"].icon::before
{
  background-image: url(icons/checkmark.svg?default#default);
}

#social ul li .icon::before
{
  width: 2.5rem;
  height: 2.5rem;
  margin: 0em auto;
}

.icon#twitter::before
{
  background-image: url("social/twitter.svg");
}

.icon#facebook::before
{
  background-image: url("social/facebook.svg");
}

.icon#google-plus::before
{
  background-image: url("social/googleplus.svg");
}

/*
  Forms
 */

.floating-input
{
  position: relative;
  margin: 1.8rem 0rem 0.5rem;
  padding-top: 0.7rem;
}

.floating-input input
{
  width: 100%;
  padding: 5px;
  border-width: 0px 0px 1px;
  border-color: #CDCDCD;
  outline: none;
  font-size: 1rem;
}

.floating-input input:placeholder-shown ~ label,
.floating-input input + label,
.floating-input input:focus + label
{
  position: absolute;
  top: 0.9rem;
  left: 0.3rem;
  font-size: 1rem;
}

.floating-input input + label,
.floating-input input:focus + label
{
  top: -0.5rem;
  font-size: 0.9rem;
}

html[dir="rtl"] .floating-input input:placeholder-shown ~ label,
html[dir="rtl"] .floating-input input ~ label,
html[dir="rtl"] .floating-input input:focus ~ label
{
  right: 0.3rem;
  left: auto;
}

[data-validation] .floating-input input:focus:invalid
{
  border-color: #C11D27;
}

[data-validation] .floating-input input:focus:invalid ~ .attention::before,
[data-validation] .floating-input input:valid ~ .attention::before
{
  position: absolute;
  top: 0.3rem;
  right: 0rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.3rem;
}

/* stylelint-disable indentation */
html[dir="rtl"] [data-validation] .floating-input input:focus:invalid
  ~ .attention::before,
html[dir="rtl"] [data-validation] .floating-input input:valid
  ~ .attention::before
{
  right: auto;
  left: 0rem;
}
/* stylelint-enable indentation */

[data-validation] .floating-input input ~ .error-msg
{
  display: block;
  visibility: hidden;
  margin-top: 0.5rem;
  color: #C11D27;
}

[data-validation] .floating-input input:focus:invalid ~ .error-msg
{
  visibility: visible;
}

/*
  Animations
*/

.highlight-animate
{
  animation: highlight 1s 3;
}

@keyframes highlight
{
  0% { background-color: transparent }

  30% { background-color: #ffd7a3 }

  70% { background-color: #ffd7a3 }

  100% { background-color: transparent }
}

/*
  Sidebar
 */

#sidebar,
#sidebar .fixed,
[role="tablist"]
{
  width: 14.3rem;
}

#sidebar
{
  flex-shrink: 0;
}

#sidebar .fixed
{
  top: 1.2rem;
  bottom: 0rem;
  height: auto;
}

#sidebar header
{
  margin-right: 2rem;
  text-align: right;
}

html[dir="rtl"] #sidebar header
{
  margin-left: 2rem;
}

#sidebar header h1
{
  margin: 0rem;
  font-size: 1.5rem;
  line-height: 2rem;
}

#sidebar header h1 strong
{
  font-weight: 700;
}

#sidebar header p
{
  margin: 0rem;
  font-size: 1.8rem;
  line-height: 2.6rem;
}

html[dir="rtl"] #sidebar header
{
  text-align: left;
}

#sidebar-logo
{
  width: 3rem;
  margin-bottom: 0.7rem;
}

#sidebar nav,
#sidebar footer
{
  margin: 1.4rem 0rem;
}

[role="tablist"]
{
  position: relative;
  margin: 0rem;
  padding: 0rem;
  font-size: 1rem;
  list-style: none;
}

[role="tablist"] li a
{
  display: flex;
  margin-top: -1px;
  margin-right: -1px;
  margin-left: -1px;
  padding: 1rem 0.8rem;
  border-width: 1px;
  border-style: solid;
  border-color: #CDCDCD transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

li a[role="tab"][aria-selected]
{
  background-color: #FFF;
  font-weight: 700;
}

html:not([dir="rtl"]) li a[role="tab"][aria-selected]
{
  border-left-color: #CDCDCD;
}

html[dir="rtl"] li a[role="tab"][aria-selected]
{
  border-right-color: #CDCDCD;
}

#sidebar footer
{
  width: 100%;
}

#sidebar footer p
{
  display: flex;
  margin: 1rem 0rem;
  justify-content: center;
}

/* This is a stopgap solution of footer overlapping tabs on low resolutions */
@media (min-height: 37rem)
{
  #sidebar .fixed
  {
    position: fixed;
  }

  #sidebar footer
  {
    position: absolute;
    bottom: 0px;
  }
}

/*
  Main content
 */

body[data-tab|="general"] #content-general,
body[data-tab|="advanced"] #content-advanced,
body[data-tab|="whitelist"] #content-whitelist,
body[data-tab|="help"] #content-help
{
  display: block;
}

main
{
  width: 46.3rem;
  padding: 0px 0rem 1.4rem;
  border: 1px solid #CDCDCD;
  background-color: #FFF;
}

main > div
{
  display: none;
}

main p
{
  margin: 0.8rem 0rem;
}

/*
  Sections
 */

[role="tabpanel"] > section,
[role="tabpanel"] > .section
{
  padding: 1.4rem 2rem;
  border-top: 1px solid #CDCDCD;
}

[role="tabpanel"] > header h1,
[role="tabpanel"] > header p
{
  margin: 1.4rem 0rem;
  padding: 0rem 2rem;
}

section h2,
.section h2
{
  margin: 0rem;
}

section h2
{
  text-transform: uppercase;
}

section,
.section
{
  clear: both;
}

section.cols
{
  display: flex;
}

section.cols > *:first-child
{
  flex: 1;
}

html:not([dir="rtl"]) section.cols > *:first-child
{
  margin-right: 2rem;
}

html[dir="rtl"] section.cols > *:first-child
{
  margin-left: 2rem;
}

section.cols > *:last-child
{
  flex: 3;
}

/*
  Acceptable ads
 */

#tracking-warning
{
  position: relative;
  margin-bottom: 1rem;
  padding: 1.5rem;
  border: 2px solid #ffd7a3;
  background-color: #fefbe3;
}

#acceptable-ads:not(.show-warning) #tracking-warning
{
  display: none;
}

#hide-tracking-warning
{
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

html[dir="rtl"] #hide-tracking-warning
{
  right: auto;
  left: 1rem;
}

#tracking-warning .link
{
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

#acceptable-ads ul
{
  position: relative;
  padding-left: 2.2rem;
  list-style: none;
}

html[dir="rtl"] #acceptable-ads ul
{
  padding-right: 2.2rem;
  padding-left: 0rem;
}

#acceptable-ads ul button
{
  position: absolute;
  left: 0rem;
}

html[dir="rtl"] button
{
  right: 0rem;
  left: auto;
}

#acceptable-ads label
{
  font-size: 1rem;
  font-weight: 700;
}

html:not([dir="rtl"]) #acceptable-ads label
{
  margin-right: 0.5rem;
}

html[dir="rtl"] #acceptable-ads label
{
  margin-left: 0.5rem;
}

#dnt
{
  padding: 0.8rem;
  border: 1px solid #077CA6;
}

.new
{
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  color: #FFF;
  background-color: #077CA6;
  font-size: 0.8rem;
  line-height: 100%;
  text-transform: uppercase;
}

/*
  Tables
 */

ul.table,
ul.list
{
  margin: 0rem;
  padding: 0rem;
  list-style: none;
}

.table li,
.list li
{
  display: flex;
  align-items: center;
}

.table li
{
  margin: 0rem;
  border-width: 0px 1px 1px;
  border-style: solid;
  border-color: #CDCDCD;
}

.list li
{
  margin-bottom: 0.8rem;
  padding: 0rem;
}

.list li [role="checkbox"]
{
  flex-shrink: 0;
}

.table li:first-of-type
{
  border-top: 1px solid #CDCDCD;
}

.table.list li
{
  margin: 0rem;
  padding: 0.5rem 1rem;
}

.table.list.bottom-control li:last-of-type
{
  border-bottom: 0px;
}

.list li > span
{
  margin: 0rem 1rem;
}

.table.list li > span
{
  margin: 0rem;
  flex: 1;
}

.table.list li.empty-placeholder
{
  padding: 1rem 1.4rem;
}

.table.list li.empty-placeholder:not(:last-of-type)
{
  border-bottom: 0px;
}

.table.list button.link
{
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.table:not(.list):not(.cols) li
{
  padding-top: 0px;
  padding-bottom: 6px;
}

.table li [data-single="visible"],
.table li:first-of-type:last-of-type [data-single="hidden"]
{
  display: none;
}

.table li:first-of-type:last-of-type [data-single="visible"]
{
  display: block;
}

.th
{
  display: flex;
}

.col5 > *
{
  display: inline-block;
  vertical-align: middle;
}

.cols .col5,
.th .col5
{
  margin: 0rem 1rem;
  align-self: center;
}

.th .col5:nth-of-type(1),
.table .col5:nth-of-type(1)
{
  flex: 5;
}

.th .col5:nth-of-type(2),
.table .col5:nth-of-type(2)
{
  flex: 8;
}

.th .col5:nth-of-type(3),
.table .col5:nth-of-type(3)
{
  flex: 4;
}

.th .col5:nth-of-type(4),
.table .col5:nth-of-type(4)
{
  flex: 1;
}

.th .col5:nth-of-type(5),
.table .col5:nth-of-type(5)
{
  flex: 1;
}

html:not([dir="rtl"]) .th .col5:nth-of-type(5),
html:not([dir="rtl"]) .table .col5:nth-of-type(5)
{
  margin-right: 1.8rem;
  margin-left: 0;
}

html[dir="rtl"] .th .col5:nth-of-type(5),
html[dir="rtl"] .table .col5:nth-of-type(5)
{
  margin-right: 0;
  margin-left: 1.8rem;
}

.table.cols > span
{
  margin: 0rem;
}

.table.cols li
{
  padding: 0.5rem 0rem;
}

.table.cols .toggle
{
  -moz-margin-end: 0.5rem;
  -webkit-margin-end: 0.5rem;
}

.table.cols .gear
{
  margin: 0rem;
}

#dialog .table.list li
{
  display: block;
  padding: 0rem;
  border-width: 1px 0px 0px;
}

#dialog .table.list li:first-of-type
{
  border: 0px;
}

#dialog .table.list li button
{
  display: flex;
  width: 100%;
  height: auto;
  padding: 1.1rem 1rem;
  background-image: none;
}

#dialog .table.list li button:hover,
#dialog .table.list li button:focus
{
  background-color: #E1F2FA;
}

#dialog .table.list li button[aria-checked="true"],
.table.list li .dimmed
{
  color: #BBB;
}

#dialog .table.list li button > span
{
  margin: 0rem 0.8rem;
  font-weight: 400;
  text-transform: none;
  flex: none;
}

li.preconfigured [data-hide="preconfigured"]
{
  display: none !important;
}

/*
  Tooltips
*/

.tooltip
{
  position: relative;
  margin: 0rem;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: help;
}

html:not([dir="rtl"]) .tooltip
{
  margin-right: 1rem;
}

html[dir="rtl"] .tooltip
{
  margin-left: 1rem;
}

/*
  General tab content
*/

#blocking-languages-dialog-table
{
  border-bottom: none;
}

.button-add,
.cancel-button
{
  border: 0px;
  color: #3A7BA6;
  background-color: transparent;
  cursor: pointer;
}

/*
  Whitelist tab
 */

#content-whitelist form
{
  display: flex;
}

#content-whitelist form input
{
  height: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid #077CA6;
  font-size: 1rem;
  flex: 1;
}

html:not([dir="rtl"]) #content-whitelist form button
{
  margin-left: 0.7rem;
}

html[dir="rtl"] #content-whitelist form button
{
  margin-right: 0.7rem;
}

#whitelisting-table li
{
  padding-right: 1.4rem;
  padding-left: 1.4rem;
  border-right: 0rem;
  border-left: 0rem;
}

/*
  Advanced tab content
*/

#all-filter-lists-table li.show-message .last-update,
#all-filter-lists-table li:not(.show-message) .message,
#custom-filters:not([data-mode="empty"]) #empty-custom-filters,
#custom-filters[data-mode="empty"] #custom-filters-raw,
#custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
#custom-filters:not([data-mode="read"]) #custom-filters-edit,
.state span,
#acceptable-ads:not(.show-dnt-notification) #dnt
{
  display: none;
}

/* stylelint-disable indentation */
#all-filter-lists-table button[role="checkbox"][aria-checked="true"]
  + .state #state-active
{
  display: inline;
}
/* stylelint-enable indentation */

/* stylelint-disable indentation */
#all-filter-lists-table button[role="checkbox"][aria-checked="false"]
  + .state #state-disabled
{
  display: inline;
}
/* stylelint-enable indentation */

#all-filter-lists-table
{
  margin-bottom: 0.8rem;
}

#custom-filters-raw
{
  width: 100%;
  height: 23.6rem;
  padding: 0.8rem;
}

#custom-filters-raw:focus
{
  border: 2px solid #077CA6;
  outline: none;
}

#empty-custom-filters
{
  padding: 1.5rem;
  border: 1px solid #CDCDCD;
}

/*
  Help tab content
*/

html:not([lang="zh"]) #social-chinese,
html[lang="zh"] #social-general
{
  display: none;
}

#social ul
{
  padding: 0px;
  list-style: none;
}

#social ul li
{
  display: inline-block;
}

html:not([dir="rtl"]) #social ul li
{
  margin-right: 1rem;
}

html[dir="rtl"] #social ul li
{
  margin-left: 1rem;
}

#social ul li a
{
  display: block;
  text-align: center;
  text-decoration: none;
}

/*
  Dialog
*/

#dialog-background
{
  display: none;
  position: fixed;
  z-index: 2;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.7;
  background-color: #000;
}

body[data-dialog] #dialog-background
{
  display: block;
}

#dialog
{
  position: fixed;
  z-index: 2;
  top: 100px;
  right: 0px;
  left: 0px;
  width: 50vw;
  margin: auto;
  border-radius: 3px;
  background-color: #FFF;
}

#dialog header
{
  display: flex;
  padding: 0.7rem 1.5rem;
  background-color: #077CA6;
}

#dialog header h3
{
  margin: 0rem;
  font-size: 1rem;
  font-weight: 700;
}

.close
{
  margin: 0rem;
  cursor: pointer;
}

#dialog #dialog-body
{
  overflow: auto;
  max-height: 60vh;
}

.dialog-content
{
  margin: 1rem 1.8rem;
}

#dialog-content-language-add
{
  margin: 0rem;
}

#dialog-content-about
{
  text-align: center;
}

#dialog-content-about button
{
  margin: 1.5rem auto 1.8rem;
}

#dialog-content-about p
{
  margin: 0.5rem 0rem;
}

#dialog-content-import .side-controls
{
  margin-top: 2.45rem;
}

#dialog .table
{
  width: 100%;
}

#dialog .section:not(:first-child)
{
  margin-top: 24px;
}

#dialog-title
{
  color: #FFF;
  font-size: 16px;
  flex: 1;
}

#dialog-body .dialog-content-block
{
  padding: 12px 0px;
}

#dialog .url
{
  margin-top: 10px;
  margin-bottom: 20px;
  word-wrap: break-word;
}

#dialog-content-predefined h3:empty
{
  display: none;
}

/* stylelint-disable indentation */
body:not([data-dialog="about"]) #dialog-title-about,
body:not([data-dialog="about"]) #dialog-content-about,
body:not([data-dialog="import"]) #dialog-title-import,
body:not([data-dialog="import"]) #dialog-content-import,
body:not([data-dialog="language-add"]) #dialog-title-language-add,
body:not([data-dialog="language-change"]) #dialog-title-language-change,
body:not([data-dialog="language-add"]):not([data-dialog="language-change"])
  #dialog-content-language-add,
body:not([data-dialog="language-add"]) #dialog-body button.add,
body:not([data-dialog="language-change"]) #dialog-body button.change,
body:not([data-dialog="predefined"]) #dialog-title-predefined,
body:not([data-dialog="predefined"]) #dialog-content-predefined,
body:not([data-dialog]) #dialog
{
  display: none;
}
/* stylelint-enable indentation */

/*
  Notification
*/

#notification
{
  display: flex;
  position: fixed;
  top: 0rem;
  left: 0rem;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 1.9rem;
  opacity: 0.8;
  color: #077CA6;
  background-color: #E1F2FA;
  font-size: 1rem;
}

#notification strong
{
  text-align: center;
  flex: 1;
}
